<template>
    <view class="purchaseDetailContainer">
        <!-- 我的余额 -->
        <cunstom_navigation_bar :tapEvent="goback" :propStyles="propStyles" :title="'我的余额'">
        </cunstom_navigation_bar>

        <view class="contentBox">
            <image class="bg" src="https://visionmpapi.jiuerjindi.com/upload/mp/myBalance/bg.png"></image>
            <view class="top">
                <view class="line1">
                    <image class="icon" src="https://visionmpapi.jiuerjindi.com/upload/mp/myBalance/icon.png"></image>
                    <view class="title">账户资金保护</view>
                </view>
                <view class="line2">
                    <view class="head">可用余额（元）</view>
                    <input v-model="amount" />

                    <view class="buttons">
                        <view class="left" @tap="jumpTo('/page_recharge/recharge')">充值</view>
                        <view class="right" @tap="jumpTo('/page_cashOut/cashOut')">提现</view>
                    </view>
                </view>
            </view>
            <view class="balanceDetail">
                <view class="title">余额明细</view>
                <view class="bars">
                    <view @tap="selectedIndex=0" :class="selectedIndex == 0?'bar selected':'bar'">全部</view>
                    <view @tap="selectedIndex=1" :class="selectedIndex == 1?'bar selected':'bar'">支出</view>
                    <view @tap="selectedIndex=2" :class="selectedIndex == 2?'bar selected':'bar'">收入</view>
                </view>
                <view class="list">
                    <view class="detail" v-for="(item,index) in details">
                        <view class="left">
                            <view class="l1">{{item.content}}</view>
                            <view class="l2">{{item.date}}</view>
                        </view>
                        <view :class="item.type=='expend'?'red':'black'">
                            <span v-if="item.type=='expend'">-</span>
                            <span v-if="item.type=='income'">+</span>
                            <span>￥{{item.amount}}</span>
                        </view>
                    </view>
                </view>
            </view>
        </view>



        <view class="zhanwei"></view>




    </view>
</template>
<script>
    const util = require("@/utils/util.js");
    const api = require("@/utils/api.js");
    var QQMapWX = require('../utils/qqmap-wx-jssdk.js');
    const mapChange = require('../utils/mapChange.js');

    const app = getApp();
    export default {
        data() {
            return {
                selectedIndex: 0,
                details: [
                    {
                        'content': '购买商品',
                        'date': '2021-09-17 11:04:06',
                        'type': 'expend',
                        'amount': '175.00'
                    },
                    {
                        'content': '余额支付',
                        'date': '2021-09-17 11:04:06',
                        'type': 'expend',
                        'amount': '255.00'
                    },
                    {
                        'content': '充值',
                        'date': '2021-09-17 11:04:06',
                        'type': 'income',
                        'amount': '175.00'
                    },
                    {
                        'content': '提现',
                        'date': '2021-09-17 11:04:06',
                        'type': 'expend',
                        'amount': '175.00'
                    },
                    {
                        'content': '充值',
                        'date': '2021-09-17 11:04:06',
                        'type': 'income',
                        'amount': '185.00'
                    },
                    {
                        'content': '充值',
                        'date': '2021-09-17 11:04:06',
                        'type': 'income',
                        'amount': '185.00'
                    },
                ],
                amount: 0,
                acceptPhone: 0,



                imgDomain: "",

                propStyles: {

                    iconSrc: "black",
                    // bgColor: '#FECF01',

                }

            };
        },
        computed: {

        },
        methods: {
            goBack() {

                uni.navigateBack()
            },

            jumpUrl(num) {
                if (num == 1) {
                    uni.navigateTo({

                        url: `/page_changeAddress/changeAddress?id=${this.defaultAddress.id}&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 2) {
                    uni.navigateTo({
                        url: `/page_addressEdit/addressEdit?id=null&mallProductId=${this.mallProductId}&skuId=${this.skuId}&quantity=${this.quantity}`
                    })
                } else if (num == 3) {
                    uni.navigateTo({
                        url: `/page_protocol/protocol`,
                    })
                }

            },
            getOrderAddress(id) {
                util.request(api.getOrderAddress, {


                }, 'GET', 'application/json').then(res => {

                    if (res.code == 200) {
                        let addressList
                        addressList = res.rows
                        // this.defaultAddress = addressList[0]
                        // this.defaultAddress = []
                        if (id) { //从修改地址页面过来，使用修改后的值

                        } else {//使用默认值


                        }
                        addressList.forEach((el) => {
                            if ((!id && el.isDefault == 1) || (id && el.id == id)) {
                                this.defaultAddress = el
                            }

                        })
                        this.getGoodInfo();

                    } else {
                        util.toast('查询失败')
                    }

                }).catch((err) => {
                    console.log('err', err)

                });
            },
            getGoodInfo() {
                let queryParams = {
                    mallProductId: this.mallProductId,
                    quantity: this.quantity,
                }
                if (this.defaultAddress.id) {
                    queryParams.addressID = this.defaultAddress.id
                }

                util
                    .request(
                        api.productDetail,
                        queryParams,
                        "GET",
                        "application/json"
                    )
                    .then((res) => {
                        if (res.code == 200) {
                            this.antiqueDetail = JSON.parse(JSON.stringify(res.data))
                            if (this.antiqueDetail.deliveryType == 3) {
                                this.getLocation()
                            }

                            this.antiqueDetail.wxNormalMallProductSkuVoList.forEach(element => {
                                if (element.skuId == this.skuId) {
                                    this.selectedOption = element
                                }
                            });


                        } else {
                            util.toast("获取失败，请重试~");
                        }
                    })
                    .catch((err) => {
                        console.log("err", err);
                        reject(err);
                    });
            },

      jumpTo(url, isTabPage, mustLogin) {
        console.log('首页手机号~~', app.globalData.phone);
        if (mustLogin && !app.globalData.phone) {
          //去登录授权
          uni.navigateTo({
            url: `/page_login/login?from=myInfo`,
          })
          return
        }
        if (!url) {
          util.toast('敬请期待~')
          return
        }
        console.log('1111');
        if (isTabPage) {
          console.log('2222');
          uni.switchTab({
            url: `${url}`,
          })
        } else {
          console.log('333');
          uni.navigateTo({
            url: `${url}`
          })
        }

      },


            goback() {
                console.log("回去");
                uni.navigateBack();
            },


        },
        onReady() { },
        // onShow(){

        //       },
        created() { },
        onShow: function () {

        },
        watch: {

        },


        onLoad: function (option) {



            this.imgDomain = process.env.VUE_APP_BASE_URL;




        },

    };
</script>
<style lang="scss">
    page {
        height: 100vh;
        overflow: auto;
        background: #F4F4F2;
    }
</style>
<style lang="scss" scoped>
    .purchaseDetailContainer {
        background: #f4f4f2;
        box-sizing: border-box;

        ::v-deep .companyInfoContainer {
            position: absolute;
            top: 0rpx;
            left: 0rpx;

            .navigationBar {
                background: transparent;
            }
        }
    }

    .contentBox {
        width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        position: relative;

        .bg {
            width: 750rpx;
            height: 474rpx;
        }

        .top {
            position: absolute;
            width: 690rpx;
            height: 450rpx;
            background: url('https://visionmpapi.jiuerjindi.com/upload/mp/myBalance/topBg.png');
            background-size: cover;
            margin-top: 196rpx;

            .line1 {
                display: flex;
                height: 80rpx;
                padding-left: 26rpx;
                align-items: center;

                .icon {
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 26rpx;
                }

                .title {
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #D93F11;
                }
            }

            .line2 {
                padding: 58rpx 26rpx 46rpx;

                .head {
                    font-weight: 500;
                    font-size: 28rpx;
                    color: rgba(51, 51, 51, 0.5);
                }

                input {
                    font-weight: 700;
                    font-size: 72rpx;
                    color: #333333;
                    margin-top: 34rpx;
                    margin-bottom: 50rpx;
                    height: 65rpx;
                }

                .buttons {
                    display: flex;
                    width: 100%;
                    justify-content: space-between;

                    view {
                        font-weight: 500;
                        font-size: 36rpx;
                        color: #333333;
                        text-align: center;
                        line-height: 96rpx;
                    }

                    .left {
                        width: 300rpx;
                        height: 96rpx;
                        background: #FFFFFF;
                        border-radius: 20rpx 20rpx 20rpx 20rpx;
                        border: 2rpx solid rgba(51, 51, 51, 0.3);
                    }

                    .right {
                        width: 300rpx;
                        height: 96rpx;
                        background: #FECF01;
                        border-radius: 20rpx 20rpx 20rpx 20rpx;
                    }
                }
            }
        }

        .balanceDetail {
            width: 750rpx;
            background-color: #FFFFFF;
            padding: 48rpx 56rpx 0rpx 60rpx;
            margin-top: 192rpx;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            .title {
                font-weight: 500;
                font-size: 36rpx;
                color: #333333;
                margin-bottom: 30rpx;
            }

            .bars {
                display: flex;
                margin-bottom: 32rpx;
                .bar {
                    width: 82rpx;
                    height: 42rpx;
                    background: rgba(51, 51, 51, 0.1);
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: rgba(51, 51, 51, 0.8);
                    text-align: center;
                    line-height: 42rpx;
                    margin-right: 36rpx;
                }

                .selected {
                    width: 82rpx;
                    height: 42rpx;
                    background: #FECF01;
                    border-radius: 10rpx 10rpx 10rpx 10rpx;
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #FFFFFF;
                }
            }

            .list {

                .detail {
                    display: flex;
                    height: 160rpx;
                    justify-content: space-between;
                    align-items: center;
                    border-top: 2rpx solid rgba(51,51,51,0.1);
                    .left {
                        .l1 {
                            font-weight: 500;
                            font-size: 32rpx;
                            color: #333333;
                            margin-bottom: 20rpx;
                        }

                        .l2 {
                            font-weight: 500;
                            font-size: 24rpx;
                            color: rgba(51, 51, 51, 0.5);
                        }
                    }

                    .red {
                        font-weight: 500;
                        font-size: 32rpx;
                        color: #D93F11;
                    }

                    .black {
                        font-weight: 500;
                        font-size: 32rpx;
                        color: #333333;
                    }
                }
            }

        }


    }
</style>